/*
  A stylesheet for different form elements:

  - button
  - input
  - textarea
  - select
  - checkbox
  - output
*/

.controls {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 16px 16px 0 0;
  
  label {
    color: inherit;
  }
}

// select all <button>s that are not descendants of .handsontable container elements
.tabs-component ul.tabs-component-tabs {
  position: relative;
  min-height: 47px;
}
.page button:not(.theme-code-group__nav-tab, .handsontable *) {
  margin-right: 10px;
  padding: 8px 14px;
  font-size: 15px;
  display: inline-block;
  position: static;
  cursor: pointer;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  color: #fff;
  background-color: #2c3e51;
  transition: background-color .3s ease-in-out;

  &:hover, &:focus, &:active {
    text-decoration: none;
    background-color: #2c3e51de;
  }

  &.button {

    // blue is default
    &--blue {
      background-color: #2456f2;
    }

    &--green {
      background-color: #43a047;
    }

    &--darkNavy {
      background-color: #15202f;
    }

    &--gray {
      color: #fff;
      background-color: #8D8D8D;
    }

    &--darkGray {
      color: #fff;
      background-color: #363636;
    }

    &--white {
      color: $textColor;
      border: 1px solid #cfdbe4;
      background-color: #fff;
    }
  }
}

/* OUTPUT */

output.console {
  margin: 16px 0 10px;
  display: block;
  color: #ccc;
  max-height: 250px;
  line-height: 1.4;
  padding: 1.25rem 1.5rem;
  font-size: 13px;
  background-color: #191a1b;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #aaaaab;
  font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
  white-space: pre-line;
}
